<template>
  <!--  路线、区间档案页面-->
  <div class="box-view">
    <el-row :gutter="5">
      <el-col :span="4" class="left_org">
        <!-- 搜索框 -->
        <organization-tree v-model="deptTree" ref="deptTree" :changeOnSelect='true' placeholder="选择管养单位"
                           @change="selectOrgHandel"></organization-tree>
      </el-col>
      <el-col :span="20">
        <el-row :gutter="15" class="echartsBox">
          <el-col :span="12" >
          <el-tabs type="border-card" @tab-click="tabEchartResize()">

            <el-tab-pane label="边坡档案数量统计">
              <el-card class="echart-sheet">
                <ranking-list ref="rakingEcharts1"></ranking-list>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="边坡技术状况评定等级统计">
              <el-card class="echart-sheet">
                <ranking-list ref="rakingEcharts4"></ranking-list>
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="边坡技术状况评定次数统计">
              <el-card class="echart-sheet">
                <ranking-list ref="rakingEcharts5"></ranking-list>
              </el-card>
            </el-tab-pane>

<!--            <el-tab-pane label="区间数量统计">-->
<!--              <el-card class="echart-sheet">-->
<!--                <ranking-list ref="rakingEcharts3"></ranking-list>-->
<!--              </el-card>-->
<!--            </el-tab-pane>-->
          </el-tabs>
          </el-col  >
          <el-col :span="12">
            <el-tabs type="border-card">

              <el-tab-pane label="地质灾害档案数量统计">
                <el-card class="echart-sheet">
                  <ranking-list ref="rakingEcharts2"></ranking-list>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="地质灾害风险调查等级统计">
                <el-card class="echart-sheet">
                  <ranking-list ref="rakingEcharts6"></ranking-list>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="地质灾害风险调查次数统计">
                <el-card class="echart-sheet">
                  <ranking-list ref="rakingEcharts7"></ranking-list>
                </el-card>
              </el-tab-pane>

            </el-tabs>
          </el-col>
        </el-row>


      </el-col>
    </el-row>
    <x-loading v-show="isLoading"></x-loading>
  </div>

</template>

<script>
  import RankingList from './echarts/ranking-list'
  import {
    queryDamageOrderCountByDept,
    querySlopeTechniqueCountByDept,
    queryDamageByDept,
    querySlopeByDept,
    querySlopTechniqueByDept,
    queryDamageOrderByDept,
    queryRoadSectionByDept
  } from '@/services/model/ranking-list'
  import OrganizationTree from '@/components/organization-tree/all'
  import Format from '@/utils/format'

  import ItemMixins from "./old-modules/item.mixins";
  import XLoading from '@/components/animation/x-loading.vue'

  export default {
    components: {OrganizationTree, RankingList,XLoading},
    mixins: [ItemMixins],
    data() {
      return {
        isLoading:false,
        series: [], series2: [], series3: [], series4: [], series5: [],series6: [], series7: [],
        title: '',
        chartsName: ['rakingEcharts2', 'rakingEcharts1', 'rakingEcharts4', 'rakingEcharts6', 'rakingEcharts3','rakingEcharts5', 'rakingEcharts7'],
        // 表单
        form: {
        },
        deptTree: {
          breadList: [],//面包屑
          deptTreeId: '',
        },
      }
    },
    filters: {
      // 时间格式化
      formatTimer(timer) {
        if (timer) {
          return Format(new Date(timer), 'yyyy年MM月dd日')
        }
        return ''
      },
    },
    computed: {},
    activated() {
    },
    mounted() {
      this.updateEchats()
    },
    methods: {
      tabEchartResize(){
        this.$refs['rakingEcharts1'].echartResize()
      },
      updateEchats(){
        this.isLoading = true
        this.queryDamageByDept()
        this.querySlopeByDept()
        this.querySlopTechniqueByDept()
        this.queryDamageOrderByDept()
        // this.queryRoadSectionByDept()
        this.querySlopeTechniqueCountByDept()
        this.queryDamageOrderCountByDept()
      },
      //获取数据
      //地灾点数量统计表
      async queryDamageByDept() {
        let res = await queryDamageByDept(this.form)
        let data = res?.data || []
        this.series=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }

        this.title = '地质灾害档案数量统计表'
        this.$refs['rakingEcharts2'].updateEchart(data.yName, data.xName, this.series, this.title)
      },
      //边坡数量统计
      async querySlopeByDept() {
        let res = await querySlopeByDept(this.form)
        let data = res?.data || []
        this.series2=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series2.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '边坡档案数量统计'
        this.$refs['rakingEcharts1'].updateEchart(data.yName, data.xName, this.series2, this.title)
      },
      //技术评定数量统计表
      async querySlopTechniqueByDept() {
        let res = await querySlopTechniqueByDept(this.form)
        let data = res?.data || []
        this.series3=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series3.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '边坡技术状况评定等级统计'
        this.$refs['rakingEcharts4'].updateEchart(data.yName, data.xName, this.series3, this.title)
      },
      //地灾调查数量统计表
      async queryDamageOrderByDept() {
        let res = await queryDamageOrderByDept(this.form)
        let data = res?.data || []
        this.series4=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series4.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '地质灾害风险调查等级统计'
        this.$refs['rakingEcharts6'].updateEchart(data.yName, data.xName, this.series4, this.title)
      },
      //区间数量
      async queryRoadSectionByDept() {
        let res = await queryRoadSectionByDept(this.form)
        let data = res?.data || []
        this.series5=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series5.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '区间数量统计表'
        this.$refs['rakingEcharts3'].updateEchart(data.yName, data.xName, this.series5, this.title)
      },
      //地灾调查次数统计表
      async queryDamageOrderCountByDept() {
        let res = await queryDamageOrderCountByDept(this.form)
        let data = res?.data || []
        this.series7=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series7.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '地质灾害风险调查次数统计'
        this.$refs['rakingEcharts7'].updateEchart(data.yName, data.xName, this.series7, this.title)
        this.isLoading = false
      },
      //技术评定次数统计表
      async querySlopeTechniqueCountByDept() {
        let res = await querySlopeTechniqueCountByDept(this.form)
        let data = res?.data || []
        this.series6=[]
        for (let i = 0; i <= data.yName.length; i++) {
          this.series6.push(
            {
              name: data.yName[i],
              type: 'bar',
              stack: 'total',
              barWidth: 20, //设置宽度
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: data['value' + (i + 1)]
            },
          )
        }
        this.title = '边坡技术状况评定次数统计'
        this.$refs['rakingEcharts5'].updateEchart(data.yName, data.xName, this.series6, this.title)
      },

      //组织机构组件回调
      selectOrgHandel() {
        this.$forceUpdate()
        this.form.deptTreeId = this.deptTree.deptTreeId
        this.updateEchats()
      },

    }
  }
</script>

<style scoped="scoped" lang="less">
  .card_echarts {
    box-shadow: none;
  }

  .box-view {
    .left_org {
      height: calc(100vh - 83px);
      border-radius: 8px;
    }

    .page {
      .page_filter {
        padding: 10px 20px;
      }
    }

    .bread_button_text {
      padding-right: 0px;
      font-size: 18px;
      font-weight: 600;
      color: #1990FE;
    }
  }

  .el-table {
    /deep/ .el-table {
      th {
        background-color: #0DC26B !important;
        padding: 5px !important;
      }
    }
  }

  .page_main {
    /deep/ .el-table__expanded-cell {
      background-color: #e4e4e4 !important;
    }
  }

  .road-name {
    color: #1990FE;
    font-size: 17px;
    font-weight: 600;
  }

  .el-date-editor--date {
    width: 200px;
  }

  .echart-sheet {
    height: calc(100vh - 175px);
    width: 100%;
    overflow-y: auto;
  }
.echartsBoxs{
  /*width: 100%;*/
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}
  .echartsBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 2% 0 1%;

    margin: 20px 0px;

    ::-webkit-scrollbar {
      width: 0px;
    }

    ::-webkit-scrollbar-track {
      --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb {
      border-radius: 5px;
    }
  }
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item{
    color: #1990FE;
  }
  /deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover{
    color: #1990FE;
  }
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  background: #1990FE;
  color: white;
  font-weight: 600;
  font-size: 110%;
}
</style>
